<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Makisu ~ CSS 3D Dropdown Concept</title>
    <link rel="stylesheet" href="./style.css">
    <style>
        .root {
            display: none;
        }
    </style>
</head>

<body>
    <!-- <section class="demo"> -->
    <dl class="list sashimi open" style="transform: perspective(1200px);">
        <dt>Sashimi</dt>
        <span class="node root" style="transform-origin: 50% 0% 0px; transform-style: preserve-3d; animation: swing-out 5.6s ease-in-out 0s 1 normal forwards running;"><span class="node" style="transform-origin: 50% 0% 0px; transform-style: preserve-3d; animation: unfold-first 0.5s ease-in-out 0s 1 normal forwards running; transform: rotateX(180deg);"><dd style="position: relative; transform-style: preserve-3d; transform: translateZ(-0.1px);"><a href="http://www.jq22.com/demo/Makisu-master20151202/#">Maguro</a><span class="face over" style="transform: translateZ(0.1px); background: rgba(0, 0, 0, 0.12); opacity: 0; animation: unfold-over 0.225s ease-in-out 0.4s 1 normal forwards running;"></span>
        <span class="face back" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(115, 200, 169); transform: translateZ(-0.1px);"></span>
        </dd><span class="node" style="transform-origin: 50% 0% 0px; transform-style: preserve-3d; animation: unfold 0.5s ease-in-out 0.4s 1 normal forwards running; transform: rotateX(180deg);"><dd style="position: relative; transform-style: preserve-3d; transform: translateZ(-0.1px);"><a href="http://www.jq22.com/demo/Makisu-master20151202/#">Toro</a><span class="face over" style="transform: translateZ(0.1px); background: rgba(0, 0, 0, 0.12); opacity: 0; animation: unfold-over 0.225s ease-in-out 0.8s 1 normal forwards running;"></span>
        <span class="face back" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(115, 200, 169); transform: translateZ(-0.1px);"></span>
        </dd><span class="node" style="transform-origin: 50% 0% 0px; transform-style: preserve-3d; animation: unfold 0.5s ease-in-out 0.8s 1 normal forwards running; transform: rotateX(180deg);"><dd style="position: relative; transform-style: preserve-3d; transform: translateZ(-0.1px);"><a href="http://www.jq22.com/demo/Makisu-master20151202/#">Ebi</a><span class="face over" style="transform: translateZ(0.1px); background: rgba(0, 0, 0, 0.12); opacity: 0; animation: unfold-over 0.225s ease-in-out 1.2s 1 normal forwards running;"></span>
        <span class="face back" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(115, 200, 169); transform: translateZ(-0.1px);"></span>
        </dd><span class="node" style="transform-origin: 50% 0% 0px; transform-style: preserve-3d; animation: unfold 0.5s ease-in-out 1.2s 1 normal forwards running; transform: rotateX(180deg);"><dd style="position: relative; transform-style: preserve-3d; transform: translateZ(-0.1px);"><a href="http://www.jq22.com/demo/Makisu-master20151202/#">Saba</a><span class="face over" style="transform: translateZ(0.1px); background: rgba(0, 0, 0, 0.12); opacity: 0; animation: unfold-over 0.225s ease-in-out 1.6s 1 normal forwards running;"></span>
        <span class="face back" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(115, 200, 169); transform: translateZ(-0.1px);"></span>
        </dd><span class="node" style="transform-origin: 50% 0% 0px; transform-style: preserve-3d; animation: unfold 0.5s ease-in-out 1.6s 1 normal forwards running; transform: rotateX(180deg);"><dd style="position: relative; transform-style: preserve-3d; transform: translateZ(-0.1px);"><a href="http://www.jq22.com/demo/Makisu-master20151202/#">Ika</a><span class="face over" style="transform: translateZ(0.1px); background: rgba(0, 0, 0, 0.12); opacity: 0; animation: unfold-over 0.225s ease-in-out 2s 1 normal forwards running;"></span>
        <span class="face back" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(115, 200, 169); transform: translateZ(-0.1px);"></span>
        </dd><span class="node" style="transform-origin: 50% 0% 0px; transform-style: preserve-3d; animation: unfold 0.5s ease-in-out 2s 1 normal forwards running; transform: rotateX(180deg);"><dd style="position: relative; transform-style: preserve-3d; transform: translateZ(-0.1px);"><a href="http://www.jq22.com/demo/Makisu-master20151202/#">Tako</a><span class="face over" style="transform: translateZ(0.1px); background: rgba(0, 0, 0, 0.12); opacity: 0; animation: unfold-over 0.225s ease-in-out 2.4s 1 normal forwards running;"></span>
        <span class="face back" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(115, 200, 169); transform: translateZ(-0.1px);"></span>
        </dd><span class="node" style="transform-origin: 50% 0% 0px; transform-style: preserve-3d; animation: unfold 0.5s ease-in-out 2.4s 1 normal forwards running; transform: rotateX(180deg);"><dd style="position: relative; transform-style: preserve-3d; transform: translateZ(-0.1px);"><a href="http://www.jq22.com/demo/Makisu-master20151202/#">Tomago</a><span class="face over" style="transform: translateZ(0.1px); background: rgba(0, 0, 0, 0.12); opacity: 0; animation: unfold-over 0.225s ease-in-out 2.8s 1 normal forwards running;"></span>
        <span class="face back" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(115, 200, 169); transform: translateZ(-0.1px);"></span>
        </dd><span class="node" style="transform-origin: 50% 0% 0px; transform-style: preserve-3d; animation: unfold 0.5s ease-in-out 2.8s 1 normal forwards running; transform: rotateX(180deg);"><dd style="position: relative; transform-style: preserve-3d; transform: translateZ(-0.1px);"><a href="http://www.jq22.com/demo/Makisu-master20151202/#">Kani</a><span class="face over" style="transform: translateZ(0.1px); background: rgba(0, 0, 0, 0.12); opacity: 0; animation: unfold-over 0.225s ease-in-out 3.2s 1 normal forwards running;"></span>
        <span class="face back" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(115, 200, 169); transform: translateZ(-0.1px);"></span>
        </dd><span class="node" style="transform-origin: 50% 0% 0px; transform-style: preserve-3d; animation: unfold 0.5s ease-in-out 3.2s 1 normal forwards running; transform: rotateX(180deg);"><dd style="position: relative; transform-style: preserve-3d; transform: translateZ(-0.1px);"><a href="http://www.jq22.com/demo/Makisu-master20151202/#">Katsuo</a><span class="face over" style="transform: translateZ(0.1px); background: rgba(0, 0, 0, 0.12); opacity: 0; animation: unfold-over 0.225s ease-in-out 3.6s 1 normal forwards running;"></span>
        <span class="face back" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(115, 200, 169); transform: translateZ(-0.1px);"></span>
        </dd><span class="node" style="transform-origin: 50% 0% 0px; transform-style: preserve-3d; animation: unfold 0.5s ease-in-out 3.6s 1 normal forwards running; transform: rotateX(180deg);"><dd style="position: relative; transform-style: preserve-3d; transform: translateZ(-0.1px);"><a href="http://www.jq22.com/demo/Makisu-master20151202/#">Maguro</a><span class="face over" style="transform: translateZ(0.1px); background: rgba(0, 0, 0, 0.12); opacity: 0; animation: unfold-over 0.225s ease-in-out 3.6s 1 normal forwards running;"></span>
        <span class="face back" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(115, 200, 169); transform: translateZ(-0.1px);"></span>
        </dd>
        </span>
        </span>
        </span>
        </span>
        </span>
        </span>
        </span>
        </span>
        </span>
        </span>
        </span>
    </dl>
    <a class="toggle">Toggle</a>
    <!-- </section> -->
    <script src="./jquery.min.js"></script>
    <script src="./makisu.js"></script>
    <script>
        var $sashimi = $('.sashimi');
        var a = false;
        $('.toggle').on('click', function() {
            if (!a) {
                $sashimi.makisu({
                    selector: 'dd',
                    overlap: 0.2,
                    speed: 0.5
                });
                a = true;
            } else {
                $('.list').makisu('toggle');

            }
        });
        $('.demo a').click(function(event) {
            event.preventDefault();
        });
    </script>

</body>

</html>